@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  body {
    @apply bg-gray-50 text-gray-900;
  }
  
  * {
    @apply border-gray-200;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none shadow-sm hover:shadow-md;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 h-10 py-2 px-4;
  }

  .btn-secondary {
    @apply btn bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-200 hover:border-gray-300 h-10 py-2 px-4;
  }

  .btn-outline {
    @apply btn border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-gray-400 h-10 py-2 px-4;
  }

  .btn-ghost {
    @apply btn hover:bg-gray-100 hover:text-gray-900 h-10 py-2 px-4 shadow-none hover:shadow-sm;
  }
  
  .btn-sm {
    @apply h-8 px-3 text-xs;
  }
  
  .btn-lg {
    @apply h-12 px-8;
  }
  
  .input {
    @apply flex h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200 shadow-sm focus:shadow-md;
  }
  
  .card {
    @apply rounded-xl border bg-white text-gray-950 shadow-sm hover:shadow-md transition-shadow duration-200;
  }
  
  .card-header {
    @apply flex flex-col space-y-1.5 p-6 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200;
  }

  .card-title {
    @apply text-xl font-semibold leading-none tracking-tight text-gray-900;
  }

  .card-description {
    @apply text-sm text-gray-600;
  }

  .card-content {
    @apply p-6 pt-6;
  }

  .card-footer {
    @apply flex items-center p-6 pt-0 border-t border-gray-100 bg-gray-50;
  }
  
  .badge {
    @apply inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 shadow-sm hover:shadow-md;
  }

  .badge-default {
    @apply badge border-transparent bg-gray-900 text-gray-50 hover:bg-gray-800 hover:scale-105;
  }

  .badge-secondary {
    @apply badge border-transparent bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-200 hover:border-gray-300;
  }

  .badge-success {
    @apply badge border-transparent bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700;
  }

  .badge-warning {
    @apply badge border-transparent bg-gradient-to-r from-yellow-500 to-yellow-600 text-white hover:from-yellow-600 hover:to-yellow-700;
  }

  .badge-error {
    @apply badge border-transparent bg-gradient-to-r from-red-500 to-red-600 text-white hover:from-red-600 hover:to-red-700;
  }
  
  .table {
    @apply w-full caption-bottom text-sm;
  }
  
  .table-header {
    @apply border-b;
  }
  
  .table-body {
    @apply [&_tr:last-child]:border-0;
  }
  
  .table-footer {
    @apply border-t bg-gray-100/50 font-medium;
  }
  
  .table-row {
    @apply border-b transition-all duration-200 hover:bg-gray-50 hover:shadow-sm data-[state=selected]:bg-primary-50 data-[state=selected]:border-primary-200;
  }

  .table-head {
    @apply h-12 px-4 text-left align-middle font-semibold text-gray-700 bg-gray-50 [&:has([role=checkbox])]:pr-0;
  }

  .table-cell {
    @apply p-4 align-middle text-gray-900 [&:has([role=checkbox])]:pr-0;
  }
}

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .text-balance {
    text-wrap: balance;
  }

  /* 美化滚动条 */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgb(203 213 225) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(203 213 225);
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgb(148 163 184);
  }

  /* 渐变文字 */
  .gradient-text {
    @apply bg-gradient-to-r from-primary-600 to-primary-800 bg-clip-text text-transparent;
  }

  /* 玻璃效果 */
  .glass {
    @apply bg-white/80 backdrop-blur-sm border border-white/20;
  }

  /* 悬浮效果 */
  .hover-lift {
    @apply transition-all duration-200 hover:shadow-md;
  }

  /* 响应式间距 */
  .responsive-padding {
    @apply px-4 sm:px-6 lg:px-8;
  }

  .responsive-margin {
    @apply mx-4 sm:mx-6 lg:mx-8;
  }

  /* 动画效果 */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  @keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
  }

  .animate-fade-in {
    animation: fadeIn 0.8s ease-out;
  }

  .animate-slide-up {
    animation: slideUp 0.6s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.5s ease-out;
  }

  .animate-float {
    animation: float 3s ease-in-out infinite;
  }

  .animate-pulse-slow {
    animation: pulse 2s ease-in-out infinite;
  }

  .animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200px 100%;
    animation: shimmer 2s infinite;
  }

  /* 高级悬浮效果 */
  .hover-lift-strong {
    @apply transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
  }

  .hover-glow {
    @apply transition-all duration-300;
  }

  .hover-glow:hover {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
  }

  /* 渐变背景 */
  .gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .gradient-bg-warm {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }

  .gradient-bg-cool {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }

  .gradient-bg-sunset {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  }

  /* 玻璃态效果增强 */
  .glass-strong {
    @apply bg-white/10 backdrop-blur-md border border-white/20;
  }

  /* 移动端优化 */
  @media (max-width: 768px) {
    .hover-lift {
      @apply hover:scale-100 hover:shadow-md;
    }

    .hover-lift-strong {
      @apply hover:scale-100 hover:shadow-lg hover:translate-y-0;
    }

    .card {
      @apply rounded-lg;
    }

    .btn {
      @apply h-12 text-base;
    }
  }
}
